<template>
  <div class="login-container">
    <div class="logo" />
    <div class="form">
      <h1>登录</h1>
      <el-card v-model="loginForm" shadow="never" class="login-card">
        <!--登录表单-->
        <el-form ref="formRef" :model="loginForm" :rules="rules">
          <el-form-item prop="mobile">
            <el-input v-model="loginForm.mobile" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" type="password" />
          </el-form-item>
          <el-form-item prop="isAgree">
            <el-checkbox v-model="loginForm.isAgree">用户平台使用协议</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button :loading="loading" type="primary" style="width: 350px;" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>
<script>
// 如何实现表单校验
// 1、form组件绑定model数据对象
// 2、绑定rules校验规则
// 3、form-item绑定prop属性 >> 校验的字段名称
// 4、输入表单v-model绑定数据

// 如何判断当前是不是开发环境

// 判断是否为开发环境
const isDev = process.env.NODE_ENV === 'development' // 开发环境

export default {
  name: 'Login',
  data() {
    return {
      loading: false,
      loginForm: {
        // 这里的账号和密码只有在开发环境才进行填写，如果是生产环境不能填写账号和密码
        mobile: isDev ? '13800000002' : '', // 手机号
        password: isDev ? 'hm#qd@23!' : '', // 密码
        isAgree: isDev // 是否同意协议
      },
      rules: {
        mobile: [
          {
            required: true,
            message: '请输入手机号'
          },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '请填写正确的手机号'
          }
        ],
        password: [
          {
            required: true,
            message: '请填写密码'
          },
          {
            min: 6, // 最小位数
            max: 16, // 最大位数
            message: '密码必须6-16位'
          }
        ],
        isAgree: [{
          // 必填的校验，校验的是''或者undefined
          // 是一个自定义的校验函数
          // 其他的满足不了需求
          validator(rule, value, callback) {
            //   rule校验规则对象
            //   value当前项的值
            //   callback两种调用形式，直接调用表示校验通过
            //   如果调用的时候传入一个error对象，表示校验失败
            //   value如果为true表示用户勾选协议，校验通过
            //   value为false，表示用户没有勾选协议，校验失败
            // value ? callback() : callback(new Error('请勾选协议'))
            if (value) {
              callback()
            } else {
              callback(new Error('请勾选协议'))
            }
          }
        }]
      }
    }
  },
  created() {
    console.log(process.env.NODE_ENV)
  },
  methods: {
    async login() {
      // 3、使用async/await的方式进行校验
      try {
        await this.$refs.formRef.validate()
        this.loading = true
        // 调用登录的actions
        await this.$store.dispatch('user/login', this.loginForm)
        this.loading = false
        // 跳转主页面
        this.$router.push('/')
      } catch (e) {
        this.loading = false
      }
      // 登录接口的调用
      // 点击登录按钮之后，表单校验通过
      // 如果请求失败了，不能走接下来的逻辑
      // 写入token
      // 跳转主页
      // console.log(token)
      // 1、使用回调的方式进行校验
      // this.$refs.formRef.validate((isOk) => {
      //   // isOk如果为true,表示通过，校验不通过为false
      //   if (isOk) {
      //     console.log('校验通过')
      //   } else {
      //     console.log('校验失败')
      //   }
      // })
      // 2、使用promise的方式进行校验
      // this.$refs.formRef.validate().then(res => {
      //   console.log('通过')
      // }, err => {
      //   console.log('校验失败')
      // })
      //   如果校验通过，调用接口进行登录
      //   校验不通过，什么事情也不做
    }
  }
}
</script>
<style lang="scss">
.login-container {
  display: flex;
  align-items: stretch;
  height: 100vh;

  .logo {
    flex: 3;
    background: rgba(38, 72, 176) url(../../assets/common/login_back.png) no-repeat center / cover;
    border-top-right-radius: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 0 100px;

    .icon {
      background: url(../../assets/common/logo.png) no-repeat 70px center /
        contain;
      width: 300px;
      height: 50px;
      margin-bottom: 50px;
    }

    p {
      color: #fff;
      font-size: 18px;
      margin-top: 20px;
      width: 300px;
      text-align: center;
    }
  }

  .form {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 176px;

    .el-card {
      border: none;
      padding: 0;
    }

    h1 {
      padding-left: 20px;
      font-size: 24px;
    }

    .el-input {
      width: 350px;
      height: 44px;

      .el-input__inner {
        background: #f4f5fb;
      }
    }

    .el-checkbox {
      color: #606266;
    }
  }
}
</style>
